<template>
  <NavBar></NavBar>
    <scroll-view scroll-y style="height: 80vh" @scrolltolower="scrolltolower">
      <Carousel />
      <CateScroll />
      <Popularity />
      <FreshGoods />
      <HotBrands />
      <GuessLike :guessObj="guessObj" v-if="guessObj.length > 0" />
    </scroll-view>
</template>

<script setup>
import Popularity from "./Popularity/Popularity";
import FreshGoods from "./FreshGoods/FreshGoods";
import HotBrands from "./HotBrands/HotBrands";
import GuessLike from "./GuessLike/GuessLike";
import NavBar from './NavBar/NavBar'
import { getLike } from "@/api/home";
import { ref, onMounted } from "vue";
onMounted(async () => {
  getGessLike();
});


//#region 猜你喜欢数据传递
const guessObj = ref([]);
const pages = ref(0)
const getGessLike = async (flag=false) => {
  !flag?queryData.value.page=1:false
  const res = await getLike(queryData.value); // 获取猜你喜欢列表
  const list =res.result.items
  !flag?guessObj.value = res.result.items: guessObj.value = guessObj.value.concat(list)
  pages.value = res.result.pages;
  isLoding.value=false
};
//#endregion

const queryData = ref({
  page: 1,
  pageSize: 10
})
const isLoding=ref(false)
const scrolltolower = ()=>{
if(isLoding.value){return}
  queryData.value.page ++
  if(queryData.value.page > pages.value){
    return
  }
  isLoding.value=true
  getGessLike(true);
}
</script>

